<template>
	<view>
		
		<view class="student_box">
			<view class="title">
				请选择学生信息
			</view>	 
			
			<view class="notice_box" >
				<u-alert :title="title" type = "warning" effect="dark" :description = "description"   ></u-alert>
			</view>
			
			
     <radio-group @change="student_change">
       <view v-for="(student, index) in children_list" :key="index" class="one_student">
         <radio :value="student.nid" :checked="index === current" />  {{student.name }} {{ student.school }} {{ student.grade }} {{ student.class_ }}
       </view>
     </radio-group>
  
 
		</view>
		
		
		<view class="title">
			产品信息
		</view>	 
		
		<view  class="pay box_shadow" >
			<image mode="aspectFill" :src="detail.icon"></image>
			<view class="title">{{detail.title}}</view>
			<view class="amount">牛奶量:{{detail.amount}}</view> 
			<view class="content">{{detail.introduce}}</view>
		</view>
				

		
		
		 


		<view class="pay box_shadow">
			<u-cell-group :border="false">
				<u-cell title="金额" :border="false">
					<u--text align="right" slot="value" mode="price" 
					:text="detail.price"
					  :type="warning"
					  :size="25" ></u--text>
				</u-cell>
 
			</u-cell-group>
		</view>
 
 <view class="joinbutton" @tap="buy">
 	<view  class="join_btn" >支付 ￥ {{detail.price}} </view>
 </view>
 
	</view>
</template>

<script>
	import MxBuyButton from '@/components/common/MxBuyButton.vue';
	import * as UserApi from '@/api/user'
	import coupon from '@/components/coolc-coupon/coupon';
    import * as product_api from '@/api/product.js'
	import * as OrderApi from '@/api/order.js';
	import {
		wxPayment
	} from '@/utils/app'
	export default {
		components: {
			MxBuyButton,
			coupon
		},
		data() {
			return {
				current: 0, // 默认选择第一个学生
				id: 0,
				show: false,
				detail: {},
				coupon_id: 0,
				coupon_price: 0,
				reduce_price: 0,    
				children_list: [ ],
				student_select:[],
				description:"订单将会绑定学生信息。请注意选择"
			}
		},
		onLoad(e) {
 
 console.log("catch the post data ",e)
			this.id = e.id
			console.log("catch the post data ",this.id)
			
			this.getDetail()
			this.get_children_list()
		},
		methods: {
	 
			    student_change(value) 
				{
				    // 更新当前选中的索引
					console.log('value.detail.value:', value.detail.value);
					this.student_select = value.detail.value;
				  

				},
			
			 
			// 获取其所属的学生
			get_children_list() {
				// 创建一个参数对象，包含 nid 参数
						    const params = {
						        member_nid: uni.getStorageSync('user_id')
						    };
							
				UserApi.children_list(params).then(res => {
					this.children_list = res.info
					console.log(this.children_list,"this.children_list")
					this.student_select = this.children_list[0].nid;
			 
				})
			},
			
			
			

			buy() {
				
				const order_info = {
					user_id: uni.getStorageSync('user_id'),
					student_id: this.student_select,
					product_id: this.id,
					}
 
 
 console.log(order_info,"order_info")
 
				OrderApi.add(order_info).then(res => {
					if (res.status == 200) {
						wxPayment(res.info)
							.then(() => {
								this.$success('下单成功')
								setTimeout(function() {
									uni.switchTab({
										url: '/pages/myactivity/myactivity'
									});
								}, 1000);
							})
							.catch(err => {
								this.$error('订单未支付')
								setTimeout(function() {
									uni.switchTab({
										url: '/pages/activity/activity'
									});
								}, 2000);
							 
							}
							)
							
							.finally(() => {

							})
					} else if (res.status == 201) {
						uni.redirectTo({
							url: '/pages/activity/pay-success'
						});
					} else {
						 console.log(res,"res")
						this.$error(res.info)
					}


				})

			},
			 
		 
			close() {
				this.show = false
			},
			closeAgreement() {
				this.showAgreement = false
			},

			close() {
				this.show = false
			},
			
			getDetail()
			{
				let that = this;
				product_api.detail
				({
					id: this.id
				}).then
				(res => {
					that.detail = res.info
					console.log("that.detail",that.detail)
			  
				})  
			},

		}
	}
</script>

<style scoped lang="scss">
		@import url("asset/style.css");
		
	 
		.box_shadow {
			margin: 20rpx 20rpx 40rpx 20rpx;
			padding: 40rpx 20rpx;
			border-radius: 20rpx;
			box-shadow: 0 2rpx 3rpx 0 rgba(0, 0, 0, 0.2), 0 2rpx 15rpx 0 rgba(0, 0, 0, 0.19);

		}

	 
 .title {
 	color: #333333;
 	font-size: 36rpx;
 	font-weight: bold;
 	margin: 0rpx 10rpx 20rpx 10rpx;
 }
 
	
	
	.total{font-size:35rpx; color: #003a86;}
 
</style>